<script setup>
//果蔬表组件
import { ref, onMounted } from 'vue'
import { vegeFruGetListAPI, getCategoryAPI } from '@/services/table'
import { onReachBottom } from '@dcloudio/uni-app'
import { getVideoListAPI } from '../services/course'
const list = ref([]) // 瀑布流全部数据
const list1 = ref([]) // 瀑布流第一列数据
const list2 = ref([]) // 瀑布流第二列数据
const leftGap = 10
const rightGap = 10
const columnGap = 10
const waterfall = ref()
const params = ref({
  keyword: '',
  mt: '',
  st: '',
  pageSize: '5',
  pageNo: '1',
  total: '',
})
const current = ref(0) //标签栏的索引值
const confirm = () => {
  params.value.pageSize = 5
  params.value.pageNo = 1
  getVegeFruList()
}
const clear = () => {
  params.value.keyword = ''
  params.value.pageSize = 5
  params.value.pageNo = 1
  getVegeFruList()
}
const show = ref(false)
const total = ref(0) //总数据 做分页需要
const getVegeFruList = async () => {
  waterfall.value.clear()
  list1.value = []
  list2.value = []
  const res = await vegeFruGetListAPI(params.value)
  total.value = res.data.total
  list.value = res.data.data
  show.value = !list.value
}
onMounted(() => {
  getVegeFruList()
})

defineExpose({
  getVegeFruList,
})
const onClick = async ({ index, name }) => {
  params.value.pageSize = 5 //重置页码
  params.value.pageNo = 1
  if (name === '全部') {
    params.value.mt = ''
    params.value.st = ''
    getVegeFruList()
    return
  }
  if (index === 1 || index === 2) {
    //选到的是大分类
    params.value.mt = name
    params.value.st = '' //如果选了大分类就置空小分类
  } else {
    params.value.st = name
    params.value.mt = '' //同理置空大分类
  }
  getVegeFruList()
}
//瀑布流所需函数
const imageStyle = (item) => {
  const v = uni.upx2px(750) - leftGap - rightGap - columnGap
  const w = v / 2
  const rate = w / item.w
  return {
    width: w + 'px',
  }
}
const changeList = (e) => {
  if (e.name === 'list1') {
    list1.value.push(e.value)
  } else if (e.name === 'list2') {
    list2.value.push(e.value)
  }
}
//获取类别
const categoryList = ref([])
const getCategoryList = async () => {
  const res = await getCategoryAPI()
  const newList = res.data.map((item) => {
    return {
      name: item.st,
    }
  })
  //去重
  const map = new Map()
  newList.unshift({ name: '全部' }, { name: '水果' }, { name: '蔬菜' })
  categoryList.value = newList.filter((item) => !map.has(item.name) && map.set(item.name, 1))
}
getCategoryList()

const onTap = (id) => {
  uni.navigateTo({ url: `/pages/info/info?id=${id}&tot=table` })
}

//页面触底加载更多
const loadStatus = ref('loadmore')

const loadMore = async () => {
  const maxPageNo = Math.ceil(total.value / 5)
  if (params.value.pageNo >= maxPageNo) {
    //数据已经加载完成
    loadStatus.value = 'nomore'
    return
  }
  loadStatus.value = 'loading'
  //未加载所有数据
  params.value.pageNo++ //页数
  const res = await vegeFruGetListAPI(params.value) //发送数据
  list.value.push(...res.data.data)
  if (params.value.pageNo >= maxPageNo) loadStatus.value = 'nomore'
  else loadStatus.value = 'loadmore'
}
// 页面触底
onReachBottom(() => {
  loadMore()
})
//页面数据不过支撑页面高度去完成触底操作的时候触发
const loadmore = () => {
  loadStatus.value = 'nomore'
}
</script>

<template>
  <!-- 搜索条 -->
  <view style="padding: 20rpx">
    <uv-input
      placeholder="请输入关键词"
      border="surround"
      clearable
      @clear="clear"
      v-model="params.keyword"
      @confirm="confirm"
      shape="circle"
      prefixIcon="search"
      prefixIconStyle="font-size: 22px;color: #909399"
      customStyle="background-color: rgba(255, 255, 255, 0.5);"
    ></uv-input>
  </view>
  <!-- tab栏 -->
  <uv-sticky bgColor="#fff">
    <uv-tabs :list="categoryList" :current="current" @click="onClick" lineColor="#53A658"></uv-tabs>
  </uv-sticky>
  <!-- 空数据 -->
  <uv-empty
    mode="search"
    icon="https://cdn.uviewui.com/uview/empty/search.png"
    :show="show"
    marginTop="100rpx"
  ></uv-empty>

  <view class="waterfall">
    <uv-waterfall
      ref="waterfall"
      v-model="list"
      :add-time="10"
      :left-gap="leftGap"
      :right-gap="rightGap"
      :column-gap="columnGap"
      @changeList="changeList"
    >
      <!-- 第一列数据 -->
      <template v-slot:list1>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <view v-for="item in list1" :key="item.id" class="waterfall-item" @tap="onTap(item.id)">
            <view class="waterfall-item__image" :style="[imageStyle(item)]">
              <image :src="item.url" mode="widthFix" :style="{ width: item.width + 'px' }"></image>
            </view>
            <view class="waterfall-item__ft">
              <view class="waterfall-item__ft__title">
                <text class="value">{{ item.name }}</text>
              </view>
              <view class="waterfall-item__ft__desc uv-line-2">
                <text class="value">{{ item.alias }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <!-- 第二列数据 -->
      <template v-slot:list2>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <view v-for="item in list2" :key="item.id" class="waterfall-item" @tap="onTap(item.id)">
            <view class="waterfall-item__image" :style="[imageStyle(item)]">
              <image :src="item.url" mode="widthFix" :style="{ width: item.width + 'px' }"></image>
            </view>
            <view class="waterfall-item__ft">
              <view class="waterfall-item__ft__title">
                <text class="value">{{ item.name }}</text>
              </view>
              <view class="waterfall-item__ft__desc uv-line-2">
                <text class="value">{{ item.alias }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </uv-waterfall>
  </view>
  <!-- 加载更多组件 -->
  <uv-load-more :status="loadStatus" loadingIcon="semicircle" @loadmore="loadmore"></uv-load-more>
</template>

<style>
page {
  background-color: white;
}
</style>
<style scoped lang="scss">
$show-lines: 1;
.waterfall-item {
  overflow: hidden;
  margin-top: 10px;
  border-radius: 20px;
}
.waterfall-item__ft {
  padding: 20rpx;
  background: #fff;
  &__title {
    margin-bottom: 10rpx;
    line-height: 48rpx;
    font-weight: 700;
    .value {
      font-size: 32rpx;
      color: #303133;
    }
  }
  &__desc .value {
    font-size: 28rpx;
    color: #606266;
  }
  &__btn {
    padding: 10px 0;
  }
}
</style>
